<template>
  <!-- 完结导航栏 -->
  <div class="new-book">
    <van-tabs v-model="active">
      <van-tab v-for="(item,index) in newbook" :key="index" :title="item">
        <contentlist></contentlist>
      </van-tab>

    </van-tabs>
    <!-- <div class="fication_tab bg_grey">
      <div class="active" data-tab="0">最新完结</div>
      <div class="" data-tab="1">火爆热销</div>
    </div> -->
  </div>
</template>

<script>
import contentlist from "../../components/classification/ContentList.vue";
import { getFictionApi } from "../../api/novelmain.js";
export default {
  data() {
    return {
      active: 0,
      newbook: null,
    };
  },
  methods: {
    getFictionApiFun() {
      getFictionApi().then((data) => {
        this.newbook = data.newbook;
        console.log(this.newbook);
      });
    },
  },
  created() {
    this.getFictionApiFun();
  },
  components: {
    contentlist,
  },
};
</script>

<style lang="scss" scoped>
.fication_tab {
  display: -webkit-box;
  height: 40px;
  border-bottom: 1px solid #dadada;
  background: #fff;
  & > div {
    -webkit-box-flex: 1;
    text-align: center;
    font-size: 15px;
    color: #5f5f5f;
    position: relative;
    line-height: 40px;
    &.active {
      border-bottom: 2px solid #f54b41;
      color: #f54b41;
    }
  }
}
</style>